<template>
  <div class="upload-container">
    <el-button icon="el-icon-upload"
               size="mini"
               type="primary"
               plain
               @click=" dialogVisible=true">
      上传
    </el-button>
    <el-dialog :visible.sync="dialogVisible"
               append-to-body>
      <el-upload :multiple="true"
                 :file-list="fileList"
                 :show-file-list="true"
                 :on-remove="handleRemove"
                 :on-success="handleSuccess"
                 accept="png,jpg,jpeg,gif,png"
                 :before-upload="beforeUpload"
                 class="editor-slide-upload"
                 action="/file/uploadImage"
                 list-type="picture-card"
                 :headers="headers"
                 :data="{'conentname':conentname,'seqnumber':seqnumber,'modelBusiName':modelBusiName}"
                 :http-request="handleUpload">
        <el-button size="small"
                   type="primary">
          上传
        </el-button>
      </el-upload>
      <el-button @click="dialogVisible = false">
        取消
      </el-button>
      <el-button type="primary"
                 @click="handleSubmit">
        确认
      </el-button>
    </el-dialog>
  </div>
</template>

<script>
// import { getToken } from 'api/qiniu'
import lrz from "lrz";
export default {
  name: 'EditorSlideUpload',
  props: {
    color: {
      type: String,
      default: '#1890ff'
    },
    modelBusiName: {
      type: String,
      default: 'core'
    },
    conentname: {
      type: String,
      default: '详情'
    }
  },
  data () {
    return {
      dialogVisible: false,
      listObj: {},
      fileList: [],
      headers: {
        'Authorization': `Bearer ${localStorage.getItem('store/Authorization')}`
      },
      seqnumber: new Date().getTime()
    }
  },
  methods: {
    checkAllSuccess () {
      return Object.keys(this.listObj).every(item => this.listObj[item].hasSuccess)
    },
    handleSubmit () {
      const arr = Object.keys(this.listObj).map(v => this.listObj[v])
      if (!this.checkAllSuccess()) {
        this.$message('请等待所有图片上传成功~')
        return
      }
      this.$emit('successCBK', arr)
      this.listObj = {}
      this.fileList = []
      this.dialogVisible = false
    },
    handleSuccess (res, file) {
      const uid = file.uid
      const objKeyArr = Object.keys(this.listObj)
      for (let i = 0, len = objKeyArr.length; i < len; i++) {
        console.log(this.listObj[objKeyArr[i]].uid, uid, res)
        if (this.listObj[objKeyArr[i]].uid === uid) {
          this.listObj[objKeyArr[i]].filePath = res.data
          this.listObj[objKeyArr[i]].fileName = file.name
          this.listObj[objKeyArr[i]].hasSuccess = true
          return
        }
      }

    },
    handleRemove (file) {
      const uid = file.uid
      const objKeyArr = Object.keys(this.listObj)
      for (let i = 0, len = objKeyArr.length; i < len; i++) {
        if (this.listObj[objKeyArr[i]].uid === uid) {
          delete this.listObj[objKeyArr[i]]
          return
        }
      }
    },
    beforeUpload (file) {
      console.log(file)
      const _self = this
      const _URL = window.URL || window.webkitURL
      const fileName = file.uid
      this.listObj[fileName] = {}
      return new Promise((resolve, reject) => {
        lrz(file, { quality: 0.5, fieldName: file.name.slice(0, file.name.indexOf('.')), uid: file.uid }).then(res => {
          const img = new Image()
          img.src = _URL.createObjectURL(file)
          img.onload = function () {
            _self.listObj[fileName] = { hasSuccess: false, uid: file.uid, width: this.width, height: this.height }
          }
          // console.log('res.file', res)
          resolve(res.file)
        }).catch((err) => {
          reject(err)
        })
      })
    },
    handleUpload (e) {
      console.log(e)
      let form = new FormData()
      form.append('file', e.file)
      form.append('conentname', e.data.conentname)
      form.append('modelBusiName', e.data.modelBusiName)
      form.append('seqnumber', new Date().getTime())
      this.$command.execute({
        api: e.action,
        data: form
      }).then(res => {
        this.handleSuccess(res, e.file)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.editor-slide-upload {
  margin-bottom: 20px;
  /deep/ .el-upload--picture-card {
    width: 100%;
  }
}
.el-button {
  border-left: 1px solid #b3d8ff !important;
  border-radius: 4px !important;
}
</style>
